import {ChangeDetectionStrategy, Component} from '@angular/core';
import {Router} from '@angular/router';
import {AuthService} from '../../auth/guard/auth.service';

@Component({
  selector: 'app-header-user',
  template: `
      <div
              class="alain-default__nav-item d-flex align-items-center px-sm"
              nz-dropdown
              nzPlacement="bottomRight"
              [nzDropdownMenu]="userMenu"
      >
          <nz-avatar nzIcon="user" nzSize="small"></nz-avatar>
          admin
      </div>
      <nz-dropdown-menu #userMenu="nzDropdownMenu">
          <div nz-menu class="width-sm">
              <div nz-menu-item routerLink="/pro/account/center">
                  <i nz-icon nzType="user" class="mr-sm"></i>
                  个人中心
              </div>
              <div nz-menu-item routerLink="/userList">
                  <i nz-icon nzType="setting" class="mr-sm"></i>
                  个人设置
              </div>
              <div nz-menu-item routerLink="/exception/trigger">
                  <i nz-icon nzType="close-circle" class="mr-sm"></i>
                  触发错误
              </div>
              <li nz-menu-divider></li>
              <div nz-menu-item (click)="outLogin()">
                  <i nz-icon nzType="logout" class="mr-sm"></i>
                  退出
              </div>
          </div>
      </nz-dropdown-menu>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HeaderUserComponent {
  constructor(
    private router: Router,
    private authService: AuthService
  ) {
  }

  outLogin(): void {
    this.authService.exit(this.router);
  }
}
